<template>
	<view class="page tn-safe-area-inset-bottom">
		<view class="top-bg"></view>
		<view class="head-container">
			<view v-if="isLogin">
				<view class="head-box">
					<view class="head-box-left">
						<tn-avatar @click="nav('/hosp/users/info')" v-if="userInfo.avatar" :src="userInfo.avatar"
							size="120rpx"></tn-avatar>
						<tn-avatar @click="nav('/hosp/users/info')" v-else icon="my-circle-fill"
							backgroundColor="#3571BB" size="120rpx"
							style="color:#f2f7fe;font-size: 130rpx;"></tn-avatar>
						<view @click="nav('/hosp/users/info')"
							class="tn-padding-left-xs tn-padding-right tn-text-ellipsis">
							<view class="tn-text-bold dawn-text-lg tn-padding-left-xs">
								{{ userInfo.nickname }}
							</view>
							<!-- <view v-if="userInfo.mobile" class="tn-padding-left-xs tn-padding-top-xs">
							{{ userInfo.mobile }}
						</view> -->
							<view class="tn-margin-top-xs">
								<tn-button class="dawn-btn-xs dawn-btn-xs__info">
									<text class="tn-icon-refresh-square tn-padding-right-ss"></text>
									<text>刷新</text>
								</tn-button>
							</view>
						</view>
					</view>
					<view class="head-box-right">
						<view class="head-box-img" :style="{backgroundImage:'url('+appConfig.mineTopBg+')'}"></view>
					</view>
					<!-- <view class="dawn-line tn-margin-top-xs"></view> -->
				</view>

				<view class="data-box">
					<view class="tn-flex tn-flex-row-between tn-flex-col-center">
						<view @click="nav('/hosp/patient/list')" class="justify-content-item tn-text-center">
							<view class="data-box--count">
								<text>{{ statisticsInfo.patient || 0 }}</text>
							</view>
							<view class="data-box--name">
								<text>就诊人</text>
							</view>
						</view>
						<view class="dawn-line-v"></view>
						<!-- <view @click="nav('/hosp/address/list')" class="justify-content-item tn-text-center">
							<view class="data-box--count">
								<text>{{ statisticsInfo.patient || 0 }}</text>
							</view>
							<view class="data-box--name">
								<text>地址</text>
							</view>
						</view>
						<view class="dawn-line-v"></view> -->
						<view @click="nav('/hosp/ehealth/list')" class="justify-content-item tn-text-center">
							<view class="data-box--count">
								<text>{{ statisticsInfo.ehealth || 0 }}</text>
							</view>
							<view class="data-box--name">
								<text>健康卡</text>
							</view>
						</view>
						<view class="dawn-line-v"></view>
						<view
							@click="openLink('https://mp.weixin.qq.com/insurance/card/creditjump?cityid=999999&from=V3tAbVVGCF6hYd6fJdgMHA.%3D#wechat_redirect')"
							class="justify-content-item tn-text-center">
							<view class="data-box--count">
								<text>{{ statisticsInfo.medical || 0 }}</text>
							</view>
							<view class="data-box--name">
								<text>医保卡</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="page-container">
			<view>
				<pBox></pBox>
			</view>
			<view class="tn-margin-top-sm" v-if="menus.mineMiddle && menus.mineMiddle.length > 0">
				<view
					class="tn-padding-top-xs tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-left tn-bg-white dawn-shadow dawn-radius">
					<block v-for="(item, index) in menus.mineMiddle" :key="index">
						<view @click="nav(item)"  v-if="item.visible" class="menu-icon tn-padding-sm tn-margin-bottom-xs">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<image v-if="item.img" class="menu-icon__item--image" mode="aspectFill" :src="item.img">
								</image>
								<view v-else
									class="menu-icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
									:class="[`tn-main-gradient-${item.color}--light`]">
									<view :class="[`tn-icon-${item.icon}`]"></view>
								</view>
								<view class="tn-text-center">
									<text class="tn-text-ellipsis menu-icon__item--text">{{ item.title }}</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>

			<view class="tn-margin-top-sm" v-if="banner.length > 0">
				<!-- banner -->
				<tn-swiper :radius="15" :list="banner" name="picUrl" :height="140" :effect3d="false"
					mode="rect"></tn-swiper>
			</view>

			<view class="tn-bg-white tn-margin-top-sm dawn-shadow dawn-radius">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-15 tn-color-white">
							<view class="tn-icon-company-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">关于我们</view>
						<view class="tn-color-cyan--light tn-icon-link"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view @click="showAgree = true" class="tn-flex tn-flex-col-center">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
							<view class="tn-icon-light-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">平台协议</view>
						<view class="tn-color-blue--light tn-icon-copy"></view>
					</view>
				</tn-list-cell>
				<!-- <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-3 tn-color-white">
							<view class="tn-icon-safe-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">使用协议</view>
						<view class="tn-color-red--light tn-icon-tips"></view>
					</view>
				</tn-list-cell> -->
			</view>

		</view>



		<!-- 底部tabbar start-->
		<tn-tabbar v-model="currentIndex" :list="tabbarList" :animation="true" :safeAreaInsetBottom="true"
			activeIconColor="#aaaaaa" @change="switchTabbar">
		</tn-tabbar>

		<!-- 压屏窗 loading-->
		<tn-landscape :show="loading" :closeBtn="false" :mask="true" :maskCloseable="false">
			<tn-loading show="show" :size="70" color="#3571BB"></tn-loading>
		</tn-landscape>


		<tn-popup v-model="showAgree" mode="center" width="90%" :borderRadius="borderRadius">
			<view class="content">
				<tn-list-cell>
					<view class="tn-text-center">
						<text class="dawn-text-lg dawn-color">平台协议</text>
					</view>
				</tn-list-cell>
				<scroll-view scroll-y="true" style="height: 60vh;">
					<view class='conters'>
						<parser :html="content" ref="article"></parser>
					</view>
				</scroll-view>
				<view
					class="tn-flex tn-flex-row-center tn-flex-col-center tn-width-full tn-padding-top tn-padding-bottom">
					<tn-button @click="onAgree" class="dawn-btn-lg dawn-btn-lg__info">
						<text class="tn-icon-check tn-padding-right-xs"></text>
						<text>关 闭</text>
					</tn-button>
				</view>
			</view>
		</tn-popup>
	
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import * as UserApi from "@/api/member/user";
	import * as AuthApi from "@/api/member/auth";
	import * as ArticleApi from '@/api/cms/article.js';
	import * as Util from '@/utils/util.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();
	export default {
		name: 'mine',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'userMenu', 'patientInfo', 'patientList']),
		data() {
			return {
				currentIndex: 2,
				memberUserType: app.globalData.memberUserType,
				tabbarList: app.globalData.tabbarList,
				config_share: app.globalData.config_share, // 分享配置
				loading: false,
				banner: [],
				menus: app.globalData.appMenus,
				custom: {},
				statisticsInfo: {
					patient: 0,
					ehealth: 0,
					medical: 1
				},
				borderRadius: 40,
				showAgree: false,
				agree: {},
				content: ''
			}
		},
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getMineStatistics();
					}
				},
				deep: true
			}
		},
		created() {
			this.tabbarList = app.globalData.tabbarList;
		},
		onLoad(options) {
			console.log("mine onLoad");
			this.getArticle();
		},
		async onShow() {
			await this.$onLaunched
			this.currentIndex = 2;
			if (this.isLogin) {
				this.statisticsInfo.patient = this.patientList.length;
        let filteredPatients = this.patientList.filter(function(patient) {
          return patient.ehealthCardId !== null && patient.ehealthCardId !== "";
        });
				this.statisticsInfo.ehealth = filteredPatients.length;
				this.menus = app.globalData.appMenus;
				if (this.userInfo.openid !== null && this.userInfo.openid !== '') {
					this.getMineData();
				} else {
					toLogin();
				}
			} else {
				uni.navigateTo({
					url: '/hosp/login/wechat_login'
				})
			}
		},
		methods: {
			onAgree() {
				this.showAgree = false;
			},
			getArticle() {
				let that = this;
				ArticleApi.getArticlePage({
					categoryKey: config.CMS_TYPE.AGREE_USER
				}).then(res => {
					if (res.code === 0) {
						const l = res.data.list || [];
						if (l.length > 0) {
							that.$set(this, 'agree', l[0]);
							that.content = l[0].content;
						}
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				});
			},
			getMineData() {
				let that = this;
				if (!app.globalData.appMenus.indexTop) {
					api.getMenuByRoleCode('hospital_mp').then(res => {
						if (res.code === 0) {
							that.menus = res.data;
							app.globalData.appMenus = res.data;
						}
					});
				} else {
					this.menus = app.globalData.appMenus;
				}
			},
			getUserQrcode() {
				if (this.userInfo.qrcode) {
					uni.navigateTo({
						url: '/hosp/users/poster'
					});
				} else {
					let data = {
						userId: this.uid,
						scene: 'spid:' + this.uid,
						page: 'main/index/index'
					}
				}
			},
			getUserInfo() {
				// 刷新用户信息
				this.$store.dispatch('USERINFO');
				this.loading = false;
			},
			/**
			 * 获取个人用户统计信息
			 */
			getMineStatistics: function() {
				// StatisticsApi.mineStatistics(this.uid).then(res => {
				// 	console.table(res);
				// 	this.$set(this, 'statisticsInfo', res.data);
				// }).catch(e => {
				// 	this.$util.Tips({
				// 		title: e
				// 	});
				// });
			},
			/**
			 * 用户点击右上角分享
			 */
			// #ifdef MP
			onShareAppMessage: function() {
				return {
					title: this.config_share.title,
					imageUrl: this.config_share.imageUrl,
					desc: this.config_share.desc,
					path: '/main/index/index?shareUserId=' + this.uid
				};
			},
			// #endif
			fen2yuan(price) {
				return Util.fen2yuan(price)
			},
			add(price1, price2) {
				return Util.add(price1, price2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		// height: 80vh;
		// margin-top: -220px;
	}

	// .top-bg {
	// 	height: 250px;
	// 	background-size: 100% 100%;
	// }

	// .user-top-bg {
	// 	position: relative;
	// 	background: linear-gradient(0deg, #f2f7fe, #F0EAEA);
	// 	background-size: 100% 100%;
	// 	height: 280px;
	// 	width: 100%;
	// 	top: 0;
	// 	z-index: 1;
	// }

	.page-container {
		position: relative;
		// margin-top: -280px;
		margin-top: 0;
		// padding: 20rpx 30rpx 40rpx 30rpx;
		padding: $dawn-page-container-padding;
	}

	.head-container {
		position: relative;
		z-index: 1;
		margin-top: - $dawn-top-bg-height;
	}

	.head-box {
		// height: $dawn-mine-head-height;
		display: flex;
		justify-content: space-between;
		padding-left: 40rpx;
		// margin-top: 40rpx;
		// margin-bottom: 20rpx;
		// background-color: #cbcdcc   !important;
		color: #000 !important;
		// background: linear-gradient(0deg, $dawn-theme-color-light, $dawn-theme-color);

		// &::after {
		// 	content: " ";
		// 	position: absolute;
		// 	z-index: -1;
		// 	width: 100%;
		// 	height: 100%;
		// 	left: 0;
		// 	bottom: 0;
		// 	border-radius: inherit;
		// 	opacity: 1;
		// 	transform: scale(1, 1);
		// 	background-size: 100% 100%;
		// 	background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/3.png);
		// }

	}

	.head-box-left {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}

	.head-box-right {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		// height: $dawn-mine-head-height;
		// padding-top: 10rpx;
		background-size: cover;
	}

	.head-box-img {
		width: 90%;
		height: 100%;
		background-size: cover;
		// background-size: 100% 100%;
		// background-size: contain; 
	}

	.data-box {
		margin: $dawn-page-container-padding;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: $dawn-border-radius;
		// box-shadow:$dawn-box-shadow;
		box-shadow: 0px -100rpx 100rpx 0px $dawn-page-bg;

		&--count {
			font-size: $dawn-font-size-lg;
			font-weight: bolder;
		}

		&--name {
			margin-top: 15rpx;
			font-size: $dawn-font-size-base;
			// color: $dawn-color-grey;
		}
	}

	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				border-radius: 50%;
				position: relative;
				// z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器1 end */

	.main-image {
		border-radius: 8rpx;
		width: 100%;
		height: 100rpx;
		margin-top: 10rpx;
	}
</style>